import 'package:flutter/material.dart';
import 'package:hkzf_flutter/dio/general_type.dart';
import 'package:hkzf_flutter/scoped_model/filter_bar_model.dart';
import 'package:hkzf_flutter/utils/scoped_model_helper.dart';
import 'package:hkzf_flutter/widgets/common_title.dart';

// 筛选器的抽屉组件
class FilterDrawer extends StatelessWidget {
  const FilterDrawer({super.key});
  

  @override
  Widget build(BuildContext context) {
    // 计算抽屉宽度
    double drawerWidth = MediaQuery.of(context).size.width * 0.70; // 占据屏幕宽度的 70%
    // 计算内部tab像的
    double tabWidth = (drawerWidth - 10.0 * 4) / 3.0;


    // 获取筛选器数据
    Map<String, List<GeneralType>> data = ScopedModelHelper.getModel<FilterBarModel>(context).dataList;
    List<GeneralType> roomTypeList = data['roomTypeList']!;
    List<GeneralType> orientedList = data['orientedList']!;
    List<GeneralType> floorList = data['floorList']!;
    var selectedIds = ScopedModelHelper.getModel<FilterBarModel>(context).selectedList.toList();

    _onChange(String val){
       ScopedModelHelper.getModel<FilterBarModel>(context).selectedListTroggleItem(val);
    }
    return Drawer(
      width: drawerWidth,
      child: SafeArea(
        child: ListView(
          children: [
            const CommonTitle(title: '户型'),
             FilterDrawerItem(
              list: roomTypeList,
              onChange: _onChange,
              selectedIds: selectedIds,
              childWidth:tabWidth
            ),
            const CommonTitle(title: '楼层'),
             FilterDrawerItem(
              list: floorList,
              onChange: _onChange,
              selectedIds: selectedIds,
              childWidth:tabWidth
            ),
            const CommonTitle(title: '朝向'),
             FilterDrawerItem(
              list: orientedList,
              onChange: _onChange,
              selectedIds: selectedIds,
              childWidth:tabWidth
            ),
          ],
        )
      )
    );
  }
}


class FilterDrawerItem extends StatelessWidget {
  final List<GeneralType> list;// 数据集
  final List<String> selectedIds;// 已选中的Id
  final ValueChanged<String>? onChange;// 点击回调
  final double? childWidth;// 子项宽度


  const FilterDrawerItem({super.key, required this.list, required this.selectedIds,this.onChange, this.childWidth = 100.0});

  @override
  Widget build(BuildContext context) {
    return Container(
       padding: EdgeInsets.only(left: 10, right: 10),
       child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: list.map((item){
          // 根据是否包含选择项判断是否激活
          var isActive = selectedIds.contains(item.id);
          return InkWell(
            onTap: () {
              print('点击了 ${item.name}-${item.id}');
              if (onChange != null) return onChange!(item.id ?? '');
            },
            child: Container(
              width: childWidth,
              height: 40,
              decoration: BoxDecoration(
                border: Border.all(width: 1.0, color: Colors.green),
                borderRadius: BorderRadius.circular(6.0),
                color: isActive ? Colors.green : Colors.white,
              ),
              child: Center(
                child: Text(item.name ?? '',
                style: TextStyle(
                  color: isActive ? Colors.white : Colors.green,
                ),
                ),
              ),
            ),
           );
          }
        ).toList(),
       ),
    );
  }
}